/* eslint-disable @typescript-eslint/no-explicit-any */
import { LitElement, css, html } from "lit";
import { customElement } from "lit/decorators.js";

export interface TreeNode {
  left?: any;
  right?: any;
}

const data: TreeNode = {
  left: {
    left: {
      left: { left: undefined, right: undefined },
      right: { left: undefined, right: undefined },
    },
    right: {
      left: { left: undefined, right: undefined },
      right: { left: undefined, right: undefined },
    },
  },
  right: {
    left: {
      left: { left: undefined, right: undefined },
      right: { left: undefined, right: undefined },
    },
    right: {
      left: { left: undefined, right: undefined },
      right: { left: undefined, right: undefined },
    },
  },
};

@customElement("update-demo")
class UpdateDemo extends LitElement {
  static override styles = css`
    :host {
      display: block;
      margin: 4em;
    }
    #controls {
      display: flex;
      gap: 8px;
      padding: 8px;
      justify-content: center;
    }
    .control {
      border: solid 1px gray;
      padding: 4px;
    }
  `;

  static override properties = {
    rightValue: { type: Number },
    leftValue: { type: Number },
    baseValue: { type: Number },
  };

  declare baseValue: number;

  declare leftValue: number;

  declare rightValue: number;

  constructor() {
    super();
    this.baseValue = 0;
    this.leftValue = 0;
    this.rightValue = 0;
  }

  override render() {
    return html`
      <div id="controls">
        <div class="control">
          <button @click=${this.#reduceLeftValue}>-</button>
          <code>leftValue: ${this.leftValue}</code>
          <button @click=${this.#incrementLeftValue}>+</button>
        </div>
        <div class="control">
          <button @click=${this.#reduceBaseValue}>-</button>
          <code>baseValue: ${this.baseValue}</code>
          <button @click=${this.#incrementBaseValue}>+</button>
        </div>
        <div class="control">
          <button @click=${this.#reduceRightValue}>-</button>
          <code>rightValue: ${this.rightValue}</code>
          <button @click=${this.#incrementRightValue}>+</button>
        </div>
      </div>

      <demo-node
        .data=${data}
        .baseValue=${this.baseValue}
        .rightValue=${this.rightValue}
        .leftValue=${this.leftValue}
      >
      </demo-node>
    `;
  }

  #incrementRightValue() {
    this.rightValue++;
  }

  #incrementBaseValue() {
    this.baseValue++;
  }

  #incrementLeftValue() {
    this.leftValue++;
  }

  #reduceRightValue() {
    this.rightValue--;
  }

  #reduceBaseValue() {
    this.baseValue--;
  }

  #reduceLeftValue() {
    this.leftValue--;
  }
}

export { UpdateDemo };
